<template>
  <div id="jindoulist" > 
    <div  style="display:flex;align-items: center;margin-bottom:10px;">
            <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
            <div style="line-height: 40px;font-weight:bold:">金蜜券派发</div>
     </div> 

    <el-form ref="form" :model="form" label-width="80px">  
     <el-row> 
          <el-col :span="12" style="display:flex;">

          <el-form-item label-width="0px" >
            <el-input v-model="form.phone" placeholder="姓名/手机号"></el-input>
          </el-form-item>

           <div class="custom_button2"  style="margin-left:10px;" @click="search_but()"></div>
        </el-col>

        <el-col :span="12" style="text-align: center;display: flex;justify-content: flex-end;">
             <el-button type="primary" class="custom_color_button1" style="margin-bottom:10px;" @click="goxq_but()">
                 <img class="custom_color_button1_img" src="@/assets/images/but_bg9.png" />派发记录
            </el-button>    
        </el-col>
       
    </el-row>

    
   </el-form>

      <div class="demo" :style="{  height: dtheight + 'px' }" style="position: relative;">
              <div style="width:100%;" v-if="show"> 

                <div style="display:flex;align-items: center;margin-top:10px;">
                     
                    <div class="box1" >派发人</div>
                    <div style="padding:0px 15px;"></div>
                    <div class="box1" >所属团队</div>

                </div>

                <div style="display:flex;align-items: center;margin-top:10px;">
                     
                    <div class="box">
                     
                        <img  v-if="conter.self_icon"  style="width: 50px; height: 50px" :src="urlimg + conter.self_icon" /> 
                           <img  v-else src="@/assets/images/login_bg1.png" />
                        <div class="box_item">
                            <span>{{ conter.self_username }}</span>
                            <span>{{ conter.self_telphone }}</span>
                        </div>
                    </div>

                    <div style="padding:0px 15px;"><i class="el-icon-right"></i></div>

                    <div class="box">                      
                        <img v-if="conter.team_icon"  style="width: 30px; height: 30px" :src="urlimg + conter.team_icon" /> 
                        <img  v-else src="@/assets/images/login_bg1.png" />
                        <div class="box_item">
                            <span>{{ conter.team_username }}</span>
                            <span>{{ conter.team_telphone }}</span>
                        </div>
                    </div>

                  </div>

                   <el-form ref="form" :model="datalist" label-width="0px" style="width:300px;margin-top:20px;">

                        <el-form-item>
                            <el-input v-model.number="datalist.number" placeholder="派发数量" ></el-input>          
                        </el-form-item>    
                                      
                </el-form>

                
             </div>


                <div v-if="show" style="text-align: center;width:100%;position: absolute;bottom: 50px;">
                            <el-button  type="primary" class="custom_color_button" style="width:150px;" @click="qr_but">确认</el-button>
                </div>
             
    </div> 





   </div>
</template>

<script>

export default {
   name: 'jindoulist',
   props:{
      valuedata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        show:false,
        form:{
            phone:'',
        },
        datalist:{
           number:''
        },
        conter:{
          self_icon:'',
          self_telphone:'',
          self_uid:'',
          self_username:'',
          team_icon:'',
          team_telphone:'',
          team_username:'',
        }
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 270
      
  },
  mounted (){
     
  },
  methods: {
         list_fun(){
          this.post("/Goldbean/selectDetails", {
              telphone:this.form.phone
	        }).then(res => {
                 console.log(res)
             if(res.error_code == 0){
                        this.show = true
                        this.conter.self_icon = res.result.self_icon
                        this.conter.self_telphone = res.result.self_telphone
                        this.conter.self_uid = res.result.self_uid
                        this.conter.self_username = res.result.self_username
                        this.conter.team_icon = res.result.team_icon
                        this.conter.team_telphone = res.result.team_telphone
                        this.conter.team_username =res.result.team_username
                }else {
                      this.open1(res.message,'warning')
                      this.conter={
                            self_icon:'',
                            self_telphone:'',
                            self_uid:'',
                            self_username:'',
                            team_icon:'',
                            team_telphone:'',
                            team_username:'',
                        }
                      this.show = false
             }

         })
      },
      qr_but(){
          this.post("/Goldbean/handOutGdbTicket", {
               uid:this.conter.self_uid,
               number:this.datalist.number
	        }).then(res => {
                //console.log(res)
             if(res.error_code == 0){
                        this.open1(res.result,'success') 
                        this. conter={
                            self_icon:'',
                            self_telphone:'',
                            self_uid:'',
                            self_username:'',
                            team_icon:'',
                            team_telphone:'',
                            team_username:'',
                        }
                        this.form.phone = ''
                        this.show = false
                }else {
                      this.open1(res.message,'warning') 
                }

         })
      },
      search_but(){
         this.list_fun()
      },
      goxq_but(){
          this.$router.push({
          path: '/index/couponxq',
          query: {
          }
        })
      }

  }
}
</script>


<style scoped>
.box{
    width: 200px;
    display: flex;
    border: 1px solid #DCDFE6;
    border-radius: 5px;
    padding:10px;
}
.box1{
    width: 200px;
    display: flex;
    padding:0px 10px;
    text-align: center;
}
.box>img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.box_item{
    flex: 1;
    margin-left:10px;
}
.box_item>span{
   display: block;
}
</style>